<!-- @format -->

<template>
    <div style="clear:both;width:100%;height: 38px; position: relative; z-index: 9">
        <div class="ant-pagination-options-quick-jumper" v-if="totalCount >10">
            跳至
            <a-input v-model="goto" @change="validateText(goto)" @pressEnter="onPage(goto)" />
            页
        </div>
        <div class="pagination-total" v-show="totalCount >0">共<span>{{totalCount}}</span>条</div>
        <a-pagination
                style="margin-top:15px; text-align: right"
                :defaultCurrent="1"
                :current="currentPage"
                :pageSize="pageSize"
                :total="totalCount"
                :hideOnSinglePage="totalCount === 0"
                @change="onPage" :itemRender="itemRender"
                showSizeChanger @showSizeChange="onShowSizeChange"
        />
    </div>
</template>
<script>
    export default {
        name: 'pagination',
        props: ['totalCount', 'currentPage','pageSize'],
        data() {
            return {
                goto: '',
            }
        },
        methods: {
            onPage(page) {
                if (page === '') {
                    this.$emit('changePage', 1)
                } else {
                    this.$emit('changePage', page)
                }
                // 清空页数
                this.goto = ''
            },
            itemRender(current, type, originalElement) {
                if (type === 'prev') {
                    return <a><a-icon type="left" /></a>;
                } else if (type === 'next') {
                    return <a><a-icon type="right" /></a>;
                }
                return originalElement;
            },
            onShowSizeChange(current, pageSize) {
                this.$emit('changePageSize', pageSize)
            },
            validateText(text) {
                if (text !== undefined && text !== '') {
                    let total = Math.ceil(this.totalCount / 10)
                    text = text || ''
                    text = text.replace(/\D/g, '')
                    text = Number(text)
                    if (text < 1) {
                        text = 1
                    }
                    if (text > total) {
                        text = total
                    }
                    this.goto = text
                }
            }
        }
    }
</script>
